<template>
	<view class="phoneLogin">
		<view class="status_bar" style="height: var(--status-bar-height); width: 100%;">

		</view>

		<view class="phone-text">
			<h1>其他号码登录</h1>
		</view>
		<view class="phone">
			<view class="login-form-title">
				<text>+86</text><input type="text" placeholder="请输入手机号" v-model="login.phoneNumber">
			</view>
			<view class="login-form-verify">
				<input type="text" placeholder="请输入验证码" v-model="login.code">
				<u-button class="login-form-verify-btn" text="获取验证码" color="#fff" shape="circle" :disabled="disabled"
					@click="verifyCode"></u-button>
				<u-count-down :time="60 * 1000" format="ss" v-if="showTime"></u-count-down>
			</view>
			<u-button class="login-from-bottom" text="登录" color="#ff2442" shape="circle" @click="toLogin"
				:disabled="disabledTow"></u-button>
		</view>
		<view class="phoneLogin-bottom">
			<view class="popup-check-box">
				<u-checkbox-group placement="column" @change="checkboxChange">
					<u-checkbox shape='circle' activeColor='#ff2442' name='check' :checked="check" size="40rpx">
					</u-checkbox>
				</u-checkbox-group>
				<view class="popup-check-box-text">
					<text>
						我已阅读并同意 <i>《用户协议》</i><i>《隐私政策》</i><i>《儿童/青少年个人信息保护规则》</i>
					</text>
				</view>
			</view>
			<view class="phoneLogin-bottom-weixin">
				<u-divider text="其他登录方式" textSize="40rpx"></u-divider>
				<view class="weixin-QQ">
					<view class="weixin">
					</view>
					<image class="QQ" src="@/static/TestImg/img/QQ.png" mode="" @click="handleQQLogin()"></image>
				</view>
			</view>
			<u-popup :show="showTow" mode="bottom" :round="10" :closeable="true" @close="close">
				<view class="popup-content">
					<h3 class="popup-title">请阅读并同意以下协议</h3>
					<view class="popup-title-text">
						<i>《用户协议》</i><i>《隐私政策》</i><i>《儿童/青少年个人信息保护规则》</i>
					</view>
					<u-button class="popup-content-button" text="同意并继续" color="#ff2442" shape="circle"
						@click="consent"></u-button>
				</view>
			</u-popup>
		</view>
	<view class="footer">
	  <!-- 这里是你的底部内容 -->
		<a href="https://beian.miit.gov.cn/" target="_blank">备案号:  </a>
		<a href="https://beian.miit.gov.cn/" target="_blank">晋ICP备2024040776号-1</a>
	  <text style="margin-left: 20rpx;">版权所有 © 2024</text>
	</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: {
					phoneNumber: "",
					code: "",
					min: "",
					userId: "",
					token: "",
					isNew: ""
				},
				authCode: {
					phoneNumber: "",
					code: "",
					min: ""
				},
				show: false,
				showTow: false,
				showTime: false,
				check: true,
				messageAlert: false,
				disabled: false,
				disabledTow: false
			}
		},
		methods: {
			 // 处理QQ登录
			  handleQQLogin() {
			    // 检查条件是否满足
			    if (this.check) {
			      // 发送请求到后端接口获取QQ登录URL
			      this.request("/login/qq", "get")
			        .then(res => {
			          console.log(res);
			          if (res.data !== null) {
			            // 跳转到QQ登录页面
			            // 跳转到QQ登录页面
			            console.log(res.data.message);
			            // 使用 window.location.href 进行外部跳转
			            window.location.href = "https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=102147851&redirect_uri=http%3A%2F%2Fwww.wxhj.asia%2F%23%2Fpages%2Flogin%2FQQLoginSuccess&state=a5205fe29ca2456bbae707590a9a5e27";
			          } else {
			            console.error('获取登录URL失败: URL为空');
			            uni.showToast({
			              title: '获取登录URL失败，请稍后重试',
			              icon: 'none'
			            });
			          }
			        })
			        .catch(err => {
			          console.error('请求失败:', err);
			          // 错误处理，弹出错误提示
			          uni.showToast({
			            title: '请求失败，请重试',
			            icon: 'none'
			          });
			        });
			    } else {
			      // 如果条件不满足，显示提示信息
			      this.showTow = true;
			    }
			  
			},

		    // 验证手机号码是否有效
		    isPhoneNumberValid() {
		        const phoneRegex = /^1[3-9]\d{9}$/; // 正则表达式验证中国手机号
		        return phoneRegex.test(this.login.phoneNumber);
		    },
		    // 验证验证码是否有效
		    isCodeValid() {
		        const codeRegex = /^\d{6}$/; // 正则表达式验证6位验证码
		        return codeRegex.test(this.login.code);
		    },
		    // 验证登录表单是否有效
		    isLoginValid() {
		        return this.isPhoneNumberValid() && this.isCodeValid();
		    },
		    // 登录操作
		    toLogin() {
		        // 检查手机号和验证码是否为空
		        if (!this.isLoginValid()) {
		            return uni.showToast({
		                title: "请先输入正确的手机号或者验证码",
		                duration: 1000,
						icon:'error'
		            });
		        }
		        // 禁用登录按钮30秒
		        this.disabledTow = true;
		        setTimeout(() => {
		            this.disabledTow = false;
		        }, 30000);
		
		        // 检查用户是否同意协议
		        if (!this.check) {
		            this.showTow = true;
		        } else {
		            this.request("/user/login", "post", this.login).then(res => {
		                console.log(res);
		                if (res.data.code == 200) {
		                    uni.setStorageSync('id', res.data.result.userId);
		                    uni.setStorageSync('Authorization', res.data.result.token);
		                    if (res.data.result.new) {
		                        uni.navigateTo({
		                            url: "/pages/login/SexAndAge"
		                        });
		                    } else {
		                        uni.switchTab({
		                            url: '/pages/index/index',
		                        });
		                    }
		                }
		            }).catch(err => {
		                console.log(err);
		            });
		        }
		    },
		    // 关闭弹窗
		    close() {
		        this.show = false;
		        this.showTow = false;
		    },
		    // 切换协议同意状态
		    checkboxChange() {
		        this.check = !this.check;
		    },
		    // 同意协议并登录
		    consent() {
		        this.check = true;
		        this.showTow = false;
		        this.toLogin();
		    },
		    // 验证码发送操作
		    verifyCode() {
		        if (!this.login.phoneNumber || !this.isPhoneNumberValid()) {
		            return uni.showToast({
		                title: "请输入正确手机号",
		                duration: 1000,
							icon:'error'
		            });
		        }
		        // 显示计时器并禁用发送按钮60秒
		        this.showTime = true;
		        this.disabled = true;
		        setTimeout(() => {
		            this.showTime = false;
		            this.disabled = false;
		        }, 60000);
		
		        this.authCode.phoneNumber = this.login.phoneNumber;
		        this.request("/user/sendCode", "post", this.authCode).then(res => {
		            console.log(res);
		        }).catch(err => {
		            console.log(err);
		        });
		    }
		}
}
</script>

<style scoped>
	a{
		color: #333;
	    text-decoration: none;
	}
	.footer {  
	
	  position: fixed;
	  bottom: 0;
	  width: 100%;
	  text-align: center;
	  padding: 10px;
	  color: #333;
	 /* box-shadow: 0 -2px 4px rgba(0,0,0,0.1); */
	  font-size: 25rpx;
	}
	.phoneLogin {
		height: 1538rpx;
		display: flex;
		justify-content: space-evenly;
		flex-direction: column;
		align-items: center;
		align-content: flex-end;
	}

	.phone,
	.phoneLogin-bottom {
		width: 90%;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		align-content: space-evenly;
		align-items: center;
	}

	.popup-check-box {
		display: flex;
	}

	.popup-check-box-text {
		text-align: center;
		margin-bottom: 100rpx;
	}

	.popup-check-box-text text i {
		font-style: normal;
		color: #4a6286;

	}

	.phoneLogin-bottom-weixin {
		width: 80%;
		height: 300rpx;
	}

	.weixin-QQ {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
	}

	.weixin,
	.QQ {
		width: 100rpx;
		height: 100rpx;

		border-radius: 50%;
		display: flex;
		justify-content: center;
	}


	.weixin::before {
		font-family: "iconfont" !important;
		content: "\e607";
		font-size: 90rpx;
		color: #07c062;
	}

	.qq-img,
	.weixin-img {
		width: 80rpx;
		height: 80rpx;
		object-fit: cover;
		object-position: center;
		margin-top: 8rpx;
	}

	.login-form-title {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: space-evenly;
		/* box-sizing: content-box; */
		align-items: center;
	}

	.login-form-title text {
		display: inline-block;
		font-size: 32rpx;
		/* margin-left: 15%; */
	}

	.login-form-title input {
		width: 50%;
		height: 85%;
		margin-left: 5%;
	}

	.login-form-verify {
		width: 80%;
		height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.login-form-verify-btn {
		width: 50%;
		color: black !important;
	}

	.login-from-bottom {
		width: 70%;
		/* margin-left: 15%; */
		margin-top: 50rpx;
	}

	.popup-content-box {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-evenly;
		box-sizing: content-box;
	}

	.popup-content-box text {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-top: 5%;
	}

	.popup-content-box-i {
		display: inline-block;
		width: 100rpx;
		height: 100rpx;
	}

	.popup-content-button {
		width: 80%;
		margin-bottom: 90rpx;
	}

	.popup-title {
		display: block;
		text-align: center;
		border-bottom: 2rpx solid #989898;
		padding: 30rpx 0;
	}

	.popup-title-text {
		width: 100%;
		height: 200rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.popup-title-text i {
		font-style: normal;
		color: #6a94c8;
		font-size: 22rpx;
	}
</style>